<div v-cloak id="app" class="main-content">
    <one-table
        :option="option"
        :data="data"
        :loading="loading"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
    >
        <!-- 工具菜单 -->
        <template slot="menuLeft">
            <el-button type="primary" size="mini" @click="handleAdd">
                添加
            </el-button>
            <el-button type="primary" size="mini" @click="handleSendMsg(0)">
                全部推送订阅消息
            </el-button>
        </template>

        <template slot="menuRight">
            <div class="form-box" flex="main:left">
                <el-select
                    v-model="search.level_id"
                    placeholder="请选择会员组"
                    clearable
                    style="margin-right: 5px"
                >
                    <el-option
                        v-for="item in _level_select"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-input
                    type="text"
                    v-model="search.keyword"
                    placeholder="用户名|用户ID|Openid|昵称|手机|邮箱"
                    style="width: 240px; margin-right: 5px"
                ></el-input>
                <el-button type="primary" @click="getData">筛选</el-button>
            </div>
        </template>

        <template slot="userinfo" slot-scope="scope">
            <div flex="main:left" class="flex-row-center">
                <el-image
                    style="width: 70px; height: 70px"
                    :src="scope.row.avatar"
                    fit="fit"
                ></el-image>
                <div
                    flex="dir:top main:justify"
                    class="flex-column-start padding-left-10"
                >
                    <div>昵称:{{scope.row.nick}}</div>
                    <div>邮箱:{{scope.row.email}}</div>
                    <div>用户名:{{scope.row.username}}</div>
                    <div>手机号:{{scope.row.mobile}}</div>
                </div>
            </div>
        </template>
        <template slot="money" slot-scope="scope">
            <div flex="main:center">
                <div flex="dir:top main:justify">
                    <div>可用金额:{{scope.row.money}}</div>
                    <div>冻结金额:{{scope.row.frozen_money}}</div>
                </div>
            </div>
        </template>
        <template slot="expire_time" slot-scope="scope">
            <el-tag v-if="scope.row.expire_time == 0">无限期</el-tag>
            <el-tag v-else>{{scope.row.expire_time}}</el-tag>
        </template>

        <template slot="integral" slot-scope="scope">
            <div flex="main:center">
                <div flex="dir:top main:justify">
                    <div>可用积分:{{scope.row.integral}}</div>
                    <div>冻结积分:{{scope.row.frozen_integral}}</div>
                </div>
            </div>
        </template>
        <template slot="group" slot-scope="scope">
            <el-tag>{{scope.row.has_group.name}}</el-tag>
        </template>
        <template slot="status" slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="changeSwitch(scope.row)"
            ></el-switch>
        </template>
        <!-- 自定义操作列 -->
        <template slot="operates" slot-scope="scope">
            <el-button
                size="mini"
                :disabled="scope.row.system"
                class="_tool"
                @click="handleEdit(scope.row, scope.index)"
            >
                <i class="el-icon-edit"></i>
            </el-button>
            <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="是否要为他推送小程序订阅消息？"
                @confirm="handleSendMsg(scope.row.id, scope.index)"
            >
                <el-button
                    :disabled="scope.row.system"
                    slot="reference"
                    size="mini"
                    class="_tool"
                    type="success"
                >
                    <i class="el-icon-position"></i>
                </el-button>
            </el-popconfirm>
            <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="是否要重置密码？重置后密码为：123456"
                @confirm="handleResetPwd(scope.row, scope.index)"
            >
                <el-button
                    :disabled="scope.row.system"
                    slot="reference"
                    size="mini"
                    class="_tool"
                    type="warning"
                >
                    <i class="el-icon-refresh-left"></i>
                </el-button>
            </el-popconfirm>
            <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="删除不能恢复,确定删除吗？"
                @confirm="handleDel(scope.row, scope.index)"
            >
                <el-button
                    :disabled="scope.row.system"
                    slot="reference"
                    size="mini"
                    class="_tool"
                    type="danger"
                >
                    <i class="el-icon-delete"></i>
                </el-button>
            </el-popconfirm>
        </template>
    </one-table>
</div>
{include file='common@components/one-table'}
<script>
    const _level_select = JSON.parse(
        '{:json_encode((array)$_level_select, 1)}'
    );
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                data: [],
                loadingModel: null,
                option: {
                    index: false,
                    header: true,
                    selection: false,

                    operates: { width: 150 },
                    page: {},
                    size: 'mini',
                    column: [
                        {
                            label: '会员ID',
                            prop: 'id',
                            width: 80,
                        },
                        {
                            label: '状态',
                            prop: 'status',
                            width: 80,
                            slot: true,
                        },
                        {
                            label: '用户',
                            prop: 'userinfo',
                            width: 250,
                            slot: true,
                        },
                        {
                            label: '会员组',
                            prop: 'group',
                            slot: true,
                        },
                        {
                            label: '微信小程序OPENID',
                            prop: 'wxmp_openid',
                        },
                        {
                            label: '有效期',
                            prop: 'expire_time',
                            slot: true,
                        },
                        {
                            label: '备注信息',
                            prop: 'remark',
                        },
                        {
                            label: '注册时间',
                            prop: 'ctime',
                            width: 180,
                        },
                        {
                            label: '更新时间',
                            prop: 'mtime',
                            width: 180,
                        },
                    ],
                },
                search: {
                    level_id: '',
                    keyword: '',
                },
            };
        },

        created() {
            this.getData();
        },
        methods: {
            // 获取数据
            getData() {
                let _this = this;
                _this.loading = true;
                let postData = cloneDeep(_this.search);
                request({
                    params: {
                        s: 'user/index/index',
                        page: _this.option.page.currentPage,
                        limit: _this.option.page.pageSize,
                    },
                    data: postData,
                    method: 'post',
                }).then((e) => {
                    _this.loading = false;
                    _this.data = e.data.data.list;
                    _this.option.page.total = e.data.data.count;
                });
            },
            //分页
            handleCurrentChange(currentPage) {
                let _this = this;
                _this.option.page.currentPage = currentPage;
                _this.getData();
            },
            //每页显示数
            handleSizeChange(val) {
                let _this = this;
                _this.option.page.pageSize = val;
                _this.getData();
            },
            //改变状态
            changeSwitch(row) {
                let _this = this;
                _this.loading = true;
                request({
                    params: {
                        s: 'user/index/status/',
                        id: row.id,
                        val: row.status,
                    },
                    method: 'post',
                }).then((e) => {
                    _this.loading = false;
                });
            },
            //删除行
            handleDel(row, index) {
                let _this = this;
                _this.loading = true;
                request({
                    params: {
                        s: 'user/index/del/',
                        id: row.id,
                    },
                    method: 'post',
                }).then((e) => {
                    _this.data.splice(index, 1);
                    _this.loading = false;
                });
            },
            //重置密码
            handleResetPwd(row, index) {
                let _this = this;
                _this.loading = true;
                request({
                    params: {
                        s: 'user/index/resetPwd',
                        id: row.id,
                    },
                    method: 'post',
                }).then((e) => {
                    _this.loading = false;
                    _this.$message({
                        message: '密码已重置为：123456',
                        type: 'success',
                    });
                });
            },
            //添加
            handleAdd() {
                let _this = this;
                navigateTo({
                    s: 'user/index/edit',
                });
            },
            //编辑
            handleEdit(row, index) {
                let _this = this;
                navigateTo({
                    s: 'user/index/edit',
                    id: row.id,
                });
            },
            handleSendMsg(id) {
                let _this = this;
                if (id) {
                    _this.showLoading();
                    request({
                        params: {
                            s: 'user/index/sendTplMsg',
                            id: id,
                        },
                        method: 'post',
                    }).then((e) => {
                        _this.closeLoading();
                        _this.$message({
                            message: e.data.msg || '推送成功',
                            type: 'success',
                        });
                    });
                } else {
                    _this
                        .$confirm(
                            '此操作将为所有满足括号内任意一条规则的用户（1、会员状态正常，开启了会员播放等级开关，会员组大于等于设置的会员播放等级的相关会员；2、会员状态正常，未打开会员播放等级开关的全部会员）推送模版消息。即将打开新页面执行任务，用户量多可能耗时较长，请误关闭页面，耐心等待，是否继续？',
                            '提示',
                            {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning',
                            }
                        )
                        .then(() => {
                            _this.showLoading();
                            let url = window.location.href;
                            let urlArr = url.split('?');
                            let k = urlArr[0],
                                appU = k.split('/');
                            window.open(
                                '/' +
                                    appU[3] +
                                    '/user/index/doSendMsg?page=1&limit=15'
                            );
                            _this.closeLoading();
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消',
                            });
                        });
                }
            },
            showLoading() {
                this.loadingModel = this.$loading({
                    lock: true,
                    text: '正在执行推送任务，请勿关闭页面，耐心等待...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                });
            },
            closeLoading() {
                this.loadingModel.close();
            },
        },
    });
</script>
